<template>
  <mt-loadmore :bottom-method="ProjectloadBottom" :bottom-all-loaded="projectAllLoaded" ref="loadmoreProject" :autoFill="false">
    <!-- 项目信息 start -->
    <ul class="content">
      <router-link :to="'/project/details/' + list.id" tag="li" class="common-item-box" v-for="(list, key) in projectListData" :key="key">
        <div :class="['idx-warp-l','vm-icon', list.iconClass]"></div>
        <div class="idx-warp-r">
          <div class="idx-r-t">
            <span class="t-type">{{ list.typeid }}</span>
            <span class="t-time">{{ list.posttime }}</span>
          </div>
          <p class="idx-r-b">{{ list.stitle }}</p>
          <div class="idx-r-f">
            <span class="f-area">地址：{{ list.province }}</span>
            <span :class="['f-type',list.className]">阶段：{{ list.times }}</span>
          </div>
        </div>
      </router-link>
    </ul>
    <!-- 项目信息 end -->
  </mt-loadmore>
</template>

<script>
  import { getVmIndexProjectData } from '@/api/index.js'
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        projectPage:0,
        c_cartgoryType: '',
        projectAllLoaded: false
      }
    },
    created () {},
    computed: {
      ...mapState({
        projectListData: state => state.project.projectListData
      })
    },
    methods: {
      // 获取项目信息数据
      getProjectInfoData (flag) {
        getVmIndexProjectData(this.projectPage).then(async res => {
          let projectInfoArr = res.data.data.data;
          if ( !projectInfoArr.length ) {
            this.projectAllLoaded = true;
          };
          projectInfoArr = projectInfoArr.map(( item, key, arr ) => {
            switch (item.typeid) {
              case "电力":
                item.iconClass = 'power';
                break;
              case "环保":
                item.iconClass = 'environmental';
                break;
              case "石油石化":
                console.log(item.typeid);
                item.iconClass = 'petrochemical';
                break;
              case '冶金':
                item.iconClass = 'metallurgy';
                break;
              case '化工':
                item.iconClass = 'chemical';
                break;
              case '交通':
                item.iconClass = 'traffic';
                break;
              case '建筑':
                item.iconClass = 'architecture';
                break;
              case "制药":
                item.iconClass = 'pharmacy';
                break;
              default:
                item.iconClass = 'other';
                break;
            }
            switch (item.times) {
              case '手续审批':
                item.className = 'examining'
                break;
              case '立项申报':
                item.className = 'entryDeclaration';
                break;
              case '工程设计':
                item.className = 'projectEd';
                break;
            }
            return item;
          });
          if (this.projectListData.length) {
            this.$store.dispatch("storageProjectList", this.projectListData.concat(projectInfoArr));
          } else {
            this.$store.dispatch("storageProjectList", projectInfoArr);

          }
          if (!flag) {
            this.$refs.loadmoreProject.onBottomLoaded();
          }
        }).catch(err => console.log(err));
      },
      ProjectloadBottom () {
        this.projectPage ++;
        this.getProjectInfoData();
      }
    }
  }
</script>

<style scoped>

</style>
